<!--  -->
<template>
  <div class="loginbg">
    <div class="btn_tab">
      <span class="regin"></span>
    </div>
    <p class="title_welcome">欢迎使用源聚通</p>
    <div class="formBox">
      <van-field v-model="mobile" type="tel" placeholder="请填写手机号" />

      <van-field style="margin-top:20px;" v-model="image_code" placeholder="请输入图形验证码">
        <template #right-icon>
          <van-image width="120" height="50" :src="base64Image" @click="getImageCode" />
        </template>
      </van-field>

      <van-field style="margin-top:20px" v-model="code" center clearable placeholder="请输入短信验证码">
        <template #button>
          <van-button v-if="!smsShow" size="small" @click="sendcode" type="danger">获取验证码</van-button>
          <van-count-down
            style="color:#C2C2C2"
            @finish="finishtime"
            v-if="smsShow"
            :time="times"
            format=" ss秒后重新获取"
          />
        </template>
      </van-field>

      <van-field
        style="margin-top:20px"
        v-model="password"
        :type="islook ? 'text' : 'password'"
        placeholder="请设置密码"
      >
        <template #right-icon>
          <van-icon @click="lookPass" name="eye-o" />
        </template>
      </van-field>
      <van-field
        style="margin-top:20px"
        v-model="spassword"
        :type="islook2 ? 'text' : 'password'"
        placeholder="请再次确认密码"
      >
        <template #right-icon>
          <van-icon @click="lookPass2" name="eye-o" />
        </template>
      </van-field>
      <!-- <van-field style="margin-top:20px" v-model="password" type="password" placeholder="请设置登录密码" />
      <van-field style="margin-top:20px" v-model="password2" type="password" placeholder="请再次确认登录密码" />-->
      <!-- <van-field style="margin-top:20px" v-model="sms" center clearable  placeholder="请输入短信验证码">
        <template #button>
          <van-button size="small" type="danger">获取验证码</van-button>
        </template>
      </van-field>-->

      <!-- <van-field style="margin-top:20px" v-model="tel" type="tel2" placeholder="推荐人手机号（没有可不填写）" />
      <van-checkbox style="margin-top:10px" v-model="agree">我已阅读并同意《用户协议》《隐私协议》</van-checkbox>-->

      <van-button
        class="btn_charge"
        :disabled="!password||!spassword"
        type="danger"
        @click="handleSubmit"
      >确认修改</van-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Fetch from "../../utils/fetch";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "forget"
  },
  data() {
    //这里存放数据
    return {
      tel: "",
      mobile: "",
      tel2: "",
      smsShow: false,
      password: "",
      password2: "",
      image_code: "",
      agree: false,
      sms: "",
      spassword: "",
      code: "",
      base64Image: "",
      islook: false,
      islook2: false,

      times: 60 * 1000
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    lookPass() {
      this.islook = !this.islook;
    },
    lookPass2() {
      this.islook2 = !this.islook2;
    },
    finishtime() {
      this.smsShow = false;
    },

    finishtime() {
      this.smsShow = false;
    },

    getcode() {
      // this.smsShow = true;
    },
    getImageCode() {
      Fetch("/api/api/imageCode").then(res => {
        this.base64Image = res.data.code;
      });
    },

    sendcode() {
      if (!this.mobile) {
        this.$notify({
          message: "请输入手机号",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (!this.image_code) {
        this.$notify({
          message: "请输入图片验证码",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      // this.is_send = true;

      Fetch("/api/api/code", {
        image_code: this.image_code,
        type: "forgetpwd",
        mobile: this.mobile
      })
        .then(() => {
          this.smsShow = true;

          // this.time = 60 * 1000;
          this.$notify({
            background: "#EAF1FF",
            color: "#3292FF",
            message: "发送成功"
          });
          this.getImageCode();
        })
        .catch(() => {
          this.is_send = false;
          this.getImageCode();
        });
    },

    handleSubmit() {
      if (!this.mobile) {
        this.$notify({
          message: "请输入您的手机号",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (!this.password) {
        this.$notify({
          message: "请输入新密码",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (this.password !== this.spassword) {
        this.$notify({
          message: "两次密码不一致",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      Fetch("/api/api/forgetpwd", {
        username: this.mobile,
        password: this.password,
        code: this.code
      })
        .then(() => {
          this.$notify({
            background: "#EAF1FF",
            color: "#3292FF",
            message: "登录成功"
          });
        })
        .then(() => {
          this.$router.replace({
            path: this.$router.history.current.query.redirect || "/"
          });
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getImageCode();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */
.loginbg {
  width: 100%;
  height: 100%;
  background: url("../../assets/loginbg.png") no-repeat;
  background-size: 100% 100%;
}
.btn_tab {
  height: 83px;
  width: 100%;
  display: flex;
  align-items: center;
  /* line-height: 83px; */
  /* text-align: right; */
  justify-content: flex-end;
  color: #ff3927;
  font-size: 16px;
  font-weight: 500;
}
.regin {
  padding-right: 30px;
}
.title_welcome {
  font-size: 28px;
  font-weight: 600;
  color: #2d2d2d;
  line-height: 40px;
  padding-left: 30px;
}
.formBox {
  width: 320px;
  /* margin-top: 70px; */
  margin: auto;
  padding-top: 70px;
}
.forget {
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  color: #818181;
  padding-right: 10px;
}
.btn_charge {
  width: 318px;
  height: 50px;
  margin: auto;
  display: block;
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px #ffd9d4;
  margin-top: 50px;
}
</style>